import { getRecordDetail } from '@/pages/park/passes-record/service';
import { FilePptOutlined } from '@ant-design/icons';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Badge, Image, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
// import { getRecordDetail } from '../service';
// import type { details } from '../types';

interface detailProps {
  id?: string;
  visible: boolean;
  onClose: () => void;
}

export default (props: detailProps) => {
  const [detailItem, setDetailItem] = useState<details>();
  const [spinVisible, setSpinVisible] = useState(false);
  const { id, visible, onClose } = props;

  const channelType = new Map().set(3, '出口不收费').set(2, '出口收费').set(1, '入口').set(0, '');
  const carType_MAP = new Map().set(3, '新能源车').set(2, '大型车').set(1, '小型车');
  const carAttributes_MAP = new Map()
    .set(1, '固定车')
    .set(2, '会员车')
    .set(3, '无牌车')
    .set(4, '临时车');

  useEffect(() => {
    if (id) {
      setSpinVisible(true);
      getRecordDetail(id).then((res) => {
        if (res) {
          setDetailItem(res.data);
          setSpinVisible(false);
        }
      });
    }
  }, []);
  return (
    <Modal open={visible} width="580px" centered onCancel={onClose} title="记录详情" footer={null}>
      <Spin spinning={spinVisible}>
        <ProDescriptions column={2}>
          <ProDescriptions.Item label="领取率">{detailItem?.zoneName}</ProDescriptions.Item>
          <ProDescriptions.Item label="使用率">{detailItem?.plateColor}</ProDescriptions.Item>
          <ProDescriptions.Item label="优惠订单数">{detailItem?.plateNumber}</ProDescriptions.Item>
          <ProDescriptions.Item label="优惠总金额">
            {carAttributes_MAP.get(detailItem?.carAttributes)}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="用券总成交额">
            {carType_MAP.get(detailItem?.carType)}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="费效比">
            {carType_MAP.get(detailItem?.carType)}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="用券比单价">
            {carType_MAP.get(detailItem?.carType)}
          </ProDescriptions.Item>
          <ProDescriptions.Item label="拉新数">
            {carType_MAP.get(detailItem?.carType)}
          </ProDescriptions.Item>
        </ProDescriptions>
      </Spin>
    </Modal>
  );
};
